<template>
  <div class="app-container">
    <TheQueryForm
      :option="searchOption"
      @onSubmit="onSubmit"
      @onClear="onClear"
    ></TheQueryForm>
    <el-row style="margin-bottom: 20px">
      <el-col :span="24" style="display: flex; justify-content: flex-end">
        <el-button size="small" @click="handleExport"
          >导出Excel</el-button
        >
      </el-col>
    </el-row>
    <TheTable
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import { apiOrderSettlementListByPlatformSaaS ,apiOrderSettlementListBySaaS,apiOrderSettlementExportByPlatformSaaS} from "@/api/statements.js";
import { apiMerchantPage } from "@/api/storeManager.js";
export default {
  data() {
    const _this = this;
    return {
      queryPageApi: apiOrderSettlementListBySaaS,
      queryParams: {},
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      searchOption: [
        {
          field: "settlementFlowId",
          label: "结算id",
          placeholder: "结算id",
          type: "Input",
        },
        {
          field: "orderId",
          label: "订单id",
          placeholder: "订单id",
          type: "Input",
        },
       
        {
          type: "DatePickerRange",
          field: "time",
          label: "发起结算时间",
          placeholder: "发起结算时间",
        },
      ],
      tableOption: [
        {
          label: "结算id",
          prop: "settlementFlowId",
          width: 100,
        },
        {
          label: "关联订单id",
          prop: "orderId",
          width: 100,
        },
    
        {
          label: "结算类型",
          prop: "settleType",
          width: 100,
          formatter({ settleType }) {
            return this.$filters.filterSettleType(settleType);
          },
        },
        {
          label: "结算金额",
          prop: "settlementAmount",
          width: 100,
          formatter({ settlementAmount }) {
            return this.$filters.filterPriceFormat(settlementAmount);
          },
        },
      {
          label: "师傅佣金",
          prop: "saasWorkerCommission",
          width: 100,
          formatter({ saasWorkerCommission }) {
            return this.$filters.filterPriceFormat(saasWorkerCommission);
          },
        },
        {
          label: "关联售后单",
          prop: "saleReturnIdList",
        },

        {
          label: "订单支付时间",
          width: 120,
          prop: "orderPayTime",
          render(createElement, { row }) {
            try {
              const strArr = row.orderPayTime.split(" ");
              const dom = (
                <div >
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          },
        },

        {
          label: "发起结算时间",
          width: 120,
          prop: "createTime",
          render(createElement, { row }) {
            try {
              const strArr = row.createTime.split(" ");
              const dom = (
                <div >
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          },
        },
      ],
    };
  },
  mounted() {},
  methods: {

    // 导出
    async handleExport() {
      this.exportLoading = true;
      const res = await apiOrderSettlementExportByPlatformSaaS({

        ...this.queryParams,
      });
      if (res.code === 'SUCCESS') {
        let header = [
          {
            title: "结算id",
            prop: "id",
            valueType: "s",
          },
          {
            title: "关联订单id",
            prop: "orderId",
            valueType: "s",
          },
          {
            title: "结算类型",
            prop: "settleType",
            valueType: "s",
          },
          {
            title: "结算金额",
            prop: "settlementAmount",
            valueType: "n",
            numFmt: $numFmt.money,
          },
          
          {
            title: "师傅佣金",
            prop: "serviceProviderWorkerCommission",
            valueType: "n",
            numFmt: $numFmt.money,
          },
          {
            title: "关联售后单",
            prop: "serverSaleReturnId", //debtorTime  repaymentTime
            valueType: "s",
          },
       
          { title: "订单支付时间", prop: "orderPayTime", valueType: "s" },
          { title: "发起结算时间", prop: "createTime", valueType: "s" },
        ];

        let dataSource = res.data.map((item) => {
          return {
            ...item,
      
            settleType: this.$filters.filterSettleType(item.settleType),
            settlementAmount: item.settlementAmount / 100,
            serviceProviderWorkerCommission: item.serviceProviderWorkerCommission / 100,
          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
          fileName:'结算账单'
        };
        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message({
          message: "导出操作失败,请重试",
          type: "warring",
        });
        this.exportLoading = false;
      }
    },

    onSubmit({ values }) {
      console.log(values);
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,

          finishedStartTime: values.time ? values.time[0] : "",
          finishedEndTime: values.time ? values.time[1] : "",
        };
        delete values.time;
      }
      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {};
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .row {
  display: flex;
  .span4 {
    flex: 1;
  }
  .span20 {
    flex: 5;
  }
}
</style>
